<template>
	<view class="common-problem">
		<view class="settings-line space-between" v-for="(item,index) in problem_list" :key="index" @click="answer(item)">
			<view class="fz16">
				{{item.title}}
			</view>
			<image src="../../../static/my/right_icon.png" mode=""></image>
		</view>
		<div style="padding: 30rpx 0;" v-if="is_hit_bottom">
			<u-divider>没有更多了</u-divider>
		</div>
	</view>
</template>

<script>
	import {
		getProblemList,
	} from '@/network/loginAndMy.js'
	export default {
		data() {
			return {
				problem_list: [], // 常见问题列表
				page: 1,
				pagesize: 15,
				total: 0,
				is_hit_bottom: false,
			}
		},
		mounted() {
			this.getProblemList()
		},
		onReachBottom() {
			if(this.problem_list.length < this.total){
				this.page = ++this.page
				this.getProblemList()
			}else {
				this.is_hit_bottom = true
			}
		},
		methods: {
			// 跳转到解决方案
			answer(item){
				setTimeout(()=>{
					uni.$emit('content',{content:item.content})
				},500)
				uni.navigateTo({
					url:'/pages/subpackage/my/answer'
				})
			},
			// 获取问题列表
			getProblemList() {
				let params = {
					page: this.page,
					pagesize: this.pagesize
				}
				getProblemList(params).then(res => {
					if (res.code == 1) {
						this.total = res.data.total
						this.problem_list = [...this.problem_list,...res.data.data]
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.common-problem{
		height: 100vh;
		background-color: #F3F3F3;
		.settings-line{
			background-color: #ffffff;
			height: 110rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: relative;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		
		.settings-line::after {
			content: "";
			width: calc(100vw - 30rpx);
			height: 2rpx;
			background-color: #F2F2F2;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		
		.settings-line:last-child::after {
			content: "";
			background-color: transparent;
		}
	}
</style>